<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        ul {
            list-style-type: none;
        }

        ul li a {
            color: green;
            text-decoration: none;
            padding: 3px;
            display: block;
        }

        @media screen and (max-width: 699px) and (min-width: 520px) {
            ul li a {
                padding-left: 30px;
                background: url(".") left center no-repeat;
            }
        }
    </style>
</head>
<body>

<h1>重置浏览器窗口，查看效果!</h1>

<ul>
    <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
    <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
    <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>

</body>
</html>